<template>
    <div :class="['account',{'noScroll':show}]">
        <!-- 头部logo -->
        <div class="header">
            <img class="logo" src="@/assets/images/logo.png" />
            <div class="title">杜康消费者俱乐部</div>
            <div class="title">DUKANGCLUB</div>
        </div>
        <!-- 完善个人信息 -->
        <div class="person">
            <div class="title">完善您的会员信息</div>
            <div class="label">请选择您的性别</div>
            <div class="text sex_fixed">
                <input name="sex" @change="change" :model="entity.sex" :class="['iconfont','sex1', {'icondanxuanxuanzhong':entity.sex != 'male'},{'iconradio':entity.sex == 'male'}]" type="radio" value="male" />
                <div class="sex1_text" style="padding-right:20px">男</div>
                <input name="sex" @change="change" :model="entity.sex" :class="['iconfont','sex2', {'icondanxuanxuanzhong':entity.sex != 'female'},{'iconradio':entity.sex == 'female'}]" type="radio" value="female" />
                <div class="sex2_text">女</div>
            </div>
            <div class="text">
                <input v-model="entity.nickName" type="text" placeholder="您的姓名" />
            </div>
            <div class="text phone">
                <input v-model="entity.phoneNumber" type="text" placeholder="您的手机号码" />
                <!-- <button class="btn_code" @click="code">获取验证码</button> -->
            </div>
            <!-- <div class="text">
                <input v-model="entity.birthday" type="text" @click="setDate" onfocus="this.blur();" placeholder="您的生日" />
            </div> -->
            <!--  -->
            <div class="text">
                <input v-model="entity.birthday" type="text" @click="togglePicker1" placeholder="您的生日" />
                <!-- <button class="blue-btn" @click="togglePicker1">您的生日</button> -->
                <v-date-picker :type="1" :isShow="isShow1" @confirm="confirmDemo1" @cancel="cancelDemo1" v-model="selectedValue1"></v-date-picker>
            </div>
            <!--  -->
            <div>
                <button class="btn" @click="save">保存</button>
            </div>
            <div class="label received">
                <div>添加详细收货地址(选填)</div>
                <div @click="edit">{{isEditAddress ? "取消":"编辑"}}</div>
            </div>
            <div class="text address" v-if="!isEditAddress">

            </div>
            <div class="text" v-if="isEditAddress">
                <input v-model="received.consignee" type="text" placeholder="收件人" />
            </div>
            <div class="text" v-if="isEditAddress">
                <input v-model="received.contactWay" type="text" placeholder="联系方式" />
            </div>
            <div class="text area" v-if="isEditAddress">
                <input v-model="received.district" type="text" @click="choose" placeholder="所在地区" />
            </div>
            <div class="text area" v-if="isEditAddress">
                <input v-model="received.address" type="text" @change="detailAddress" placeholder="详细地址" />
            </div>
            <div>
                <button class="btn" v-if="isEditAddress" @click="saveAddress">保存</button>
            </div>
            <div class="label link" @click="goNext">查看用户隐私声明</div>
        </div>
        <prompt :model="isPrompt" :content="errorContent"></prompt>
        <!--省市区三级联动-->
        <div class="divwrap" v-if="show">
            <v-distpicker type="mobile" @province="onChangeProvince1" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
        </div>
        <!--遮罩层-->
        <div class="blacks" v-if="show" @click="countermand"></div>
    </div>
</template>

<script>
import Vue from 'vue'
// import * as Calendar from 'vue2-datepick'; // 日期选择插件
import VDatePicker from "../atom/datetimepicker";
import VDistpicker from 'v-distpicker'; // 地区三级联动插件

import { Api, Global, Util } from "@utils/global";
import Prompt from "@components/atom/Prompt";

// Vue.use(Calendar);
// Vue.use(VDatePicker);
Vue.use(VDistpicker);

export default {
    data () {
        return {
            user:{},
            entity:{
                sex:"male",
                nickName:"",
                phoneNumber:"",
                birthday:""
                // address:""
            },
            received:{
                consignee:"",
                contactWay:"",
                district:"",
                address:""
            },
            errorContent:"",
            isPrompt:false,
            
            show: false,
            //省市区
            province: '',
            city: '',
            area: '',
            isEditAddress:false,

            isShow1: false,
            selectedValue1: "2018-01-01",
            memberId:null,
            memberInfo:{
                id:null // 收货人信息id
            }
        }
    },
    created() {
        this.init()
    },
    components:{
        "prompt": Prompt,
        'v-distpicker':VDistpicker,
        VDatePicker
    },
    watch:{
        entity:{
            handler:function(val,oldVal){
                console.log(val,oldVal)
            },
            deep:true
        }
    },
    methods:{
        redirect: Util.redirect,
        goNext(){
            this.redirect('ys')
        },
        init(){
            // let _code = Util.getUrlCode().code;
            let _user = Util.storage.get('userInfo');
            this.user = _user;
            // if(Global.env.isFile || _code){
                return Api.ajax({
                    key: "getMember",
                    type: "GET",
                    data:{
                        id:this.user.id
                        // id:2
                    }
                }).then(
                    res => {
                        if (!res) return;
                        console.log('res',res)
                        // this.accountdata = res;
                        this.entity.nickName = res.nickName;
                        this.entity.sex = res.sex == 1 ? 'male':'female';
                        this.entity.phoneNumber = res.phoneNumber;
                        this.entity.birthday = res.birthday;
                        if(res.consigneeInformation && res.consigneeInformation != null){
                            this.received.consignee = res.consigneeInformation.consignee;// 收件人名称
                            this.received.contactWay = res.consigneeInformation.contactWay;// 收件人联系方式
                            this.received.district = res.consigneeInformation.district;// 所在地区
                            this.received.address = res.consigneeInformation.address;// 详细地址
                            this.memberId = res.consigneeInformation.memberId;
                            this.memberInfo.id = res.consigneeInformation.id;
                        }
                    },
                    res => {
                    // console.log(res);
                    //
                    }
                );
            // }else{
            //     // 获取code
            //     console.log(Global.getAuthorizeUrl())
            //     // Global.getAuthorizeUrl();
            //     window.location.href = Global.getAuthorizeUrl();
            // }
        },
        change(ev){
            console.log(ev)
            this.entity.sex = ev.target.value; 
            console.log(this.entity)
        },

        togglePicker1() {
            this.isShow1 = true;
        },
        confirmDemo1(result) {
            console.log(result);
            this.isShow1 = false; //关闭时间选择框
            this.selectedValue1 = result;
            this.entity.birthday = result;
        },
        cancelDemo1() {
            this.isShow1 = false; //关闭时间选择框
        },


        // 选择日期
        // setDate(){
        //     let _this = this;
        //     this.$picker.show({
        //         type:'datePicker',
        //         onOk: (date) =>{
        //             console.log(date)
        //             _this.entity.birthday = date
        //         }
        //     });
        // },
        detailAddress(ev){
            this.received.address = ev.target.value;
        },
        //取消选择地区
        countermand: function () {
            this.show = false
        },
        //打开选择地区
        choose: function () {
            this.show = true;
        },
        onChangeProvince1: function (a) {
            this.province = a.value;
            if (a.value == '台湾省') {
            this.show = false;
            }
        },
        onChangeCity: function (a) {
            this.city = a.value;
        },
        onChangeArea: function (a) {
            this.area = a.value;
            this.show = false;
            this.received.district = this.province + this.city + this.area;
            console.log(this.received.district)
        },


        // 获取短信验证码
        code(){
            console.log(this.entity,this.entity.phoneNumber)
            if (!this.check()) return;
        },
        // 基本信息检查手机号
        check(){
            if (!this.entity.nickName) {
                // this.errors.name = "请输入收货人姓名！";
                // hasError++;
                this.errorContent = "请输入收货人姓名！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else if(this.entity.nickName){
                this.entity.nickName = this.trim(this.entity.nickName);//去除两端空格
            }
            if (!this.entity.phoneNumber) {
                this.errorContent = "请输入您的手机号码！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else if(!(Util.isPoneAvailable(this.entity.phoneNumber))){
                this.errorContent = "请输入正确的手机号！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else{
                return true;
            }
        },
        // 保存信息
        save(){
            console.log(this.entity)
            if (!this.check()) return;
            let _openid = this.user.openid;
            // let _sex = this.entity.sex;
            _sex = _sex == 'female' ? 0:1;
            Api.ajax({
                key: "updateMember",
                type: "POST",
                data:{
                    sex:this.entity.sex,
                    nickName:this.entity.nickName,
                    phoneNumber:this.entity.phoneNumber,
                    birthday:this.entity.birthday,
                    // sex:_sex,
                    openid:_openid
                }
            }).then(
                res => {
                    this.errorContent = "信息保存成功!";
                    this.isPrompt = true;
                    this.clearProm();
                    //更新数据
                    this.init();
                },
                res => {
                // console.log(res);
                //
                }
            );
        },
        // 清除错误提示信息
        clearProm(){
            setTimeout(() => {
                this.isPrompt = false;
            }, 2000);
        },
        edit(){
            this.isEditAddress = !this.isEditAddress;
        },
        trim(str){ //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
        },
        // 收件人信息检查手机号
        checkReceived(){
            if (!this.received.consignee) {
                // this.errors.name = "请输入收货人姓名！";
                // hasError++;
                this.errorContent = "请输入收货人姓名！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else if(this.received.consignee){
                this.received.consignee = this.trim(this.received.consignee);//去除两端空格
            }
            if (!this.received.contactWay) {
                this.errorContent = "请输入收货人的手机号码！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else if(!(Util.isPoneAvailable(this.received.contactWay))){
                this.errorContent = "请输入正确的手机号！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else if (!this.received.district) {
                this.errorContent = "请输入收货人的地址！";
                this.isPrompt = true;
                this.clearProm();
                return false;
            }else{
                return true;
            }
        },
        saveAddress(){
            console.log(this.received)
            if (!this.checkReceived()) return;
            Api.ajax({
                key: "saveOrUpdateConsigneeInformation",
                type: "POST",
                data:{
                    consignee:this.received.consignee,
                    contactWay:this.received.contactWay,
                    district:this.received.district,
                    address:this.received.address,
                    id:this.memberInfo.id,
                    memberId:this.user.id
                }
            }).then(
                res => {
                    this.errorContent = "信息保存成功!";
                    this.isPrompt = true;
                    this.clearProm();
                    this.isEditAddress = false;
                    //更新数据
                    this.init();
                },
                res => {
                // console.log(res);
                //
                }
            );
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">

    .time-demo-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .account{
        color: #fff;
        .header{
            width:100%;
            text-align: center;
            .logo{
                width: 140px;
                // height: 160px;
                margin: 20px 0px;
            }
            .title{
                font-size: 26px;
                line-height: 44px;
                color: #ccb484;
            }
        }
        .person{
            padding: 50px 30px;
            width: 750px;
            overflow: hidden;
            .title{
                color: #ccb484;
                font-size: 26px;
                line-height: 62px;
            }
            .label{
                color: #fff;
                font-size: 26px;
                line-height: 44px;
            }
            .received{
                display: flex;
                justify-content: space-between;
                div{
                    color: #fff;
                    font-size: 26px;
                    line-height: 44px;
                }
            }
            .link{
                text-decoration: underline;
                color: #919090;
                line-height: 80px;
            }
            .text{
                color: #fff;
                font-size: 26px;
                padding: 20px 0px 10px;
                border-bottom: 0.6px solid #3a3a3a;
                display: flex;
                align-items: center;
                div{
                    color: #fff;
                    font-size: 26px;
                    line-height: 50px;
                }
                input{
                    color: #fff;
                    font-size: 26px;
                    line-height: 50px;
                    width: 100%;
                }
                input.iconfont{
                    width: 5%;
                    position: relative;
                    font-size: 26px;
                }
                .btn_code{
                    width:160px;
                    line-height: 60px;
                    font-size: 20px;
                    color: #333;
                    border-radius: 5px;
                    background-image: linear-gradient(to bottom , #fbf6e0, #cbb480);
                }
            }
            .sex_fixed{
                position: relative;
                padding: 0px 0px;
                margin: 15px 0px;
                border: none;
                .sex1{
                    position: absolute;
                    top:0px;
                    left:5px;
                }
                .sex1_text{
                    position: absolute;
                    top: 0px;
                    left:30px;
                }
                .sex2{
                    position: absolute;
                    top:0px;
                    left:80px;
                }
                .sex2_text{
                    position: absolute;
                    top: 0px;
                    left:140px;
                }
            }
            .address{
                width: 100%;
                height: 70px;
                line-height: 70px;
                background: #3a3a3a;
            }
            .phone{
                display: flex;
                justify-content: space-between;
            }
            .btn{
                width:690px;
                line-height: 66px;
                font-size: 26px;
                color: #333;
                border-radius: 5px;
                background-image: linear-gradient(to bottom , #fbf6e0, #cbb480);
                margin: 40px 0px;
            }
        }
    }
    .noScroll{
        height: 100vh;
        overflow: hidden;
    }

    /*遮罩层*/
    .blacks {
        position: fixed;
        width: 100%;
        height: 62%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.45);
        padding-bottom:  env(safe-area-inset-bottom);
    }
    /*省市区三级联动*/
    .divwrap {
        // height: 50%;
        height: 495px;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 99;
    }

    /*外部*/
    .divwrap > .distpicker-address-wrapper {
        color: #0d0d0d;
        height: 100%;
    }

    /*头部*/
    .divwrap >>> .address-header {
        background: #000;
        color: #fff;
        width: 100%;
        position: fixed;
        bottom: 50%;
        // height: 0.5rem;
        height: 35px;
        font-size: 0.2rem;
    }

    /*头部内容*/
    .divwrap >>> .address-header ul li {
        flex-grow: 1;
        text-align: center;
    }

    /*选择过省市区的头部*/
    .divwrap >>> .address-header .active {
        color: #fff;
        border-bottom: 0.05rem solid #666;
    }

    /*内容部分*/
    .divwrap >>> .address-container {
        // overflow: scroll;
        height: 460px;
    }
    .distpicker-address-wrapper .address-container ul{
        overflow: scroll;
        height: 460px !important;
        padding-bottom: 26px;
    }
    /*点过的地区内容*/
    .divwrap >>> .address-container .active {
        color: red;
    }
</style>
